import React, { Component } from 'react'
import { connect } from 'react-redux'
import { increment, decrement, incrementAsync } from '../../redux/actions/count'

class Count extends Component {
  // 创建下拉框ref
  selRef = React.createRef()

  //   加操作处理函数
  addFn = () => {
    //   下拉框的值
    const currentNum = this.selRef.current.value
    this.props.increment(currentNum * 1)
  }
  //   减操作处理函数
  subFn = () => {
    //   下拉框的值
    const currentNum = this.selRef.current.value
    this.props.decrement(currentNum * 1)
  }
  //   奇数加操作处理函数
  addOddFn = () => {
    //   下拉框的值
    const currentNum = this.selRef.current.value
    if (this.props.count % 2 !== 0) {
      this.props.increment(currentNum * 1)
    }
  }
  //   异步加操作处理函数
  addAsyncFn = () => {
    //   下拉框的值
    const currentNum = this.selRef.current.value
    this.props.incrementAsync(currentNum * 1, 1000)
  }
  render() {
    return (
      <div>
        <h1>Count组件：</h1>
        <h3>
          当前求和为：{this.props.count}--人数为：{this.props.person}
        </h3>
        <select ref={this.selRef}>
          <option value="1">1</option>&nbsp;
          <option value="2">2</option>&nbsp;
          <option value="3">3</option>&nbsp;
        </select>
        &nbsp;
        <button onClick={this.addFn}>+</button>&nbsp;
        <button onClick={this.subFn}>-</button>&nbsp;
        <button onClick={this.addOddFn}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.addAsyncFn}>异步加</button>&nbsp;
      </div>
    )
  }
}

export default connect(
  (state) => ({
    count: state.count,
    person: state.person.length,
  }),
  {
    increment,
    decrement,
    incrementAsync,
  }
)(Count)
